<%@ page import="com.situ.web.pojo.Teacher,java.time.LocalTime" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Teacher Update | 高端版</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 关键CSS：毛玻璃 + 视差 -->
    <style>
        html,body{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif}
        /* 天气背景 */
        #weatherBg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;
            background:linear-gradient(120deg,#89f7fe 0%,#66a6ff 100%);animation:bgMove 20s infinite linear}
        @keyframes bgMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
        /* 毛玻璃容器 */
        .glass{position:relative;max-width:680px;margin:6vh auto;padding:30px 40px;border-radius:18px;
            background:rgba(255,255,255,0.18);backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(31,38,135,.37)}
        h1{margin-top:0;text-align:center;color:#fff;text-shadow:0 1px 3px #000}
        table{width:100%;border-collapse:collapse}
        td{padding:10px 6px;color:#fff}
        input[type=text]{width:100%;padding:8px;border:none;border-radius:4px}
        /* 彩虹进度条 */
        #barWrap{margin:15px 0 25px;height:8px;border-radius:4px;background:rgba(255,255,255,.3)}
        #bar{height:100%;width:0;border-radius:4px;
            background:linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet);transition:width .8s}
        /* 天气卡片 */
        #weather{position:absolute;top:15px;right:20px;color:#fff;font-size:14px}
        /* Todo */
        #todo{margin-top:25px;color:#fff}
        #todo ul{max-height:120px;overflow-y:auto}
        #todo li{margin-bottom:4px}
        button{cursor:pointer}
    </style>
</head>
<body>
<!-- 动态天气背景 -->
<div id="weatherBg"></div>

<%
    Teacher teacher = (Teacher) request.getAttribute("teacher");
    int visitor = (int)(application.getAttribute("visitor")!=null?application.getAttribute("visitor"):0);
    application.setAttribute("visitor",visitor+1);
%>

<div class="glass">
    <h1>编辑教师信息</h1>

    <!-- 实时天气卡片（JS 动态更新） -->
    <div id="weather">
        <span id="wIcon">☀️</span>
        <span id="wTemp">--°C</span>
    </div>

    <!-- 主表单 -->
    <form action="/teacher?method=update" method="post">
        <input type="hidden" name="id" value="<%=teacher.getId()%>">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="name" value="<%=teacher.getName()%>"></td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td><input type="text" name="age" value="<%=teacher.getAge()%>"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td><input type="text" name="gender" value="<%=teacher.getGender()%>"></td>
            </tr>
            <tr>
                <td>薪资：</td>
                <td><input type="text" name="salary" value="<%=teacher.getSalary()%>"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="保存">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>

    <!-- 彩虹进度条（文件上传预览） -->
    <div id="barWrap"><div id="bar"></div></div>
    <input type="file" id="file" accept="image/*">
    <img id="preview" style="max-width:100%;margin-top:8px;display:none;border-radius:4px;">

    <!-- 会话计数器 -->
    <div style="text-align:center;margin-top:10px;font-size:14px;color:#fff">
        你是第 <%=visitor%> 位访客
    </div>

    <!-- 本地 Todo -->
    <div id="todo">
        <input id="todoInput" placeholder="本地备忘，回车添加">
        <ul id="todoList"></ul>
    </div>
</div>

<!-- 核心 JS：天气 + 文件 + Todo -->
<script>
    /* 1. 天气（纯前端，IP 自动定位） */
    fetch('https://api.openweathermap.org/data/2.5/weather?q=Beijing&units=metric&appid=YOUR_KEY')
        .then(r=>r.json())
        .then(d=>{
            document.getElementById('wIcon').textContent = '🌤️';
            document.getElementById('wTemp').textContent = Math.round(d.main.temp) + '°C';
        })
        .catch(()=>{/* 无网或KEY无效时静默降级 */});

    /* 2. 文件上传 + 彩虹进度条 */
    document.getElementById('file').addEventListener('change',function(e){
        const file=e.target.files[0];
        if(!file) return;
        const url=URL.createObjectURL(file);
        document.getElementById('preview').src=url;
        document.getElementById('preview').style.display='block';
        // 彩虹条动画
        const bar=document.getElementById('bar');
        bar.style.width='0%';
        setTimeout(()=>bar.style.width='100%',100);
    });

    /* 3. 本地 Todo（LocalStorage） */
    const input=document.getElementById('todoInput');
    const list=document.getElementById('todoList');
    function render(){
        const arr=JSON.parse(localStorage.getItem('todos')||'[]');
        list.innerHTML=arr.map(t=>`<li>${t}</li>`).join('');
    }
    input.addEventListener('keyup',e=>{
        if(e.key==='Enter' && input.value.trim()){
            const arr=JSON.parse(localStorage.getItem('todos')||'[]');
            arr.push(input.value.trim());
            localStorage.setItem('todos',JSON.stringify(arr));
            input.value='';
            render();
        }
    });
    render();
</script>
</body>
</html>